<template>
  <div>
    <s-table
      bordered
      ref="table"
      :row-key="(record) => record.customer_id"
      :columns="customerColumns"
      :data="customerData"
    >
      <template slot="source" slot-scope="text">
        {{sourceOpts[text]}}
      </template>
      <template slot="first_type" slot-scope="text">
        {{firstTypeOpts[text]}}
      </template>
      <template slot="action" slot-scope="text,record">
        <a-button size="small" type="danger" @click="abandon(record.customer_id)">放弃</a-button>
      </template>
    </s-table>
  </div>
</template>

<script>
import { STable } from '@/components'
import customerColumns from '@/columns/customer'
import { getAllCustomer, postAbandon } from '@/api/customer'

export default {
  components: {
    STable
  },
  name: 'MCustomer',
  data () {
    return {
      customerColumns: customerColumns.all,
      customerData: parameters => {
        return getAllCustomer(Object.assign(parameters, this.queryParam)).then(res => {
          this.sourceOpts = res.result.source_opts
          this.firstTypeOpts = res.result.first_type_opts
          return res.result
        })
      },
      queryParam: {},
      firstTypeOpts: {},
      sourceOpts: {}
    }
  },
  created () {
    console.log(process.env.VUE_APP_API_BASE_URL)
    this.queryParam['filter[username]'] = this.$route.params.id
  },
  methods: {
    abandon (id) {
      const app = this
      app.$confirm({
        title: '确定放弃吗？',
        onOk: () => {
          postAbandon(id).then(res => {
            app.$refs.table.refresh()
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
